<layout name="layout"/>
<link href="__PUBLIC__/Common/html/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<!-- begin #content -->

    <!-- begin row -->
    <div class="row">
        <!-- begin col-2 -->
        <!-- end col-2 -->
        <!-- begin col-10 -->
        <div class="col-md-10">
            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="alert alert-success fade in">
                    <button type="button" class="close" data-dismiss="alert">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    ColReorder adds the ability for the end user to click and drag column headers to reorder a table as they see fit, to DataTables. <br />
                    Try to drag over any table header below.
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table id="data-table" class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>测试</th>
                                <th>测试</th>
                                <th>测试(s)</th>
                                <th>测试 version</th>
                                <th>测试 grade</th>
                                <th>测试 grade</th>
                                <th>测试 grade</th>
                                <th>测试 grade</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="odd gradeX">
                                <td>Trident</td>
                                <td>Internet Explorer 4.0</td>
                                <td>Win 95+</td>
                                <td>4</td>
                                <td>X</td>
                                <td>X</td>
                                <td>X</td>
                                <td>X</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end col-10 -->
    </div>
    <!-- end row -->

<!-- ================== BEGIN BASE JS ================== -->
<script src="__PUBLIC__/Common/html/assets/plugins/jquery/jquery-1.9.1.min.js"></script>
<script src="__PUBLIC__/Common/html/assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
<script src="__PUBLIC__/Common/html/assets/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script>
<script src="__PUBLIC__/Common/html/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="__PUBLIC__/Common/html/assets/crossbrowserjs/html5shiv.js"></script>
<script src="__PUBLIC__/Common/html/assets/crossbrowserjs/respond.min.js"></script>
<script src="__PUBLIC__/Common/html/assets/crossbrowserjs/excanvas.min.js"></script>
<![endif]-->
<script src="__PUBLIC__/Common/html/assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="__PUBLIC__/Common/html/assets/plugins/jquery-cookie/jquery.cookie.js"></script>
<!-- ================== END BASE JS ================== -->

<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script src="__PUBLIC__/Common/html/assets/plugins/DataTables/js/jquery.dataTables.js"></script>
<script src="__PUBLIC__/Common/html/assets/plugins/DataTables/js/dataTables.colReorder.js"></script>
<script src="__PUBLIC__/Common/html/assets/js/table-manage-colreorder.demo.min.js"></script>
<script src="__PUBLIC__/Common/html/assets/js/apps.min.js"></script>
<!-- ================== END PAGE LEVEL JS ================== -->

<script>
    $(document).ready(function() {
        App.init();
        TableManageColReorder.init();
    });
</script>
